<template>
    <div class="main">
        <div class="pro_img" :style="flagshow?showimg:disshowimg">
                <img src="../../../assets/protectmain/pro_img.png" alt="默认背景"> 
        </div>
     
        <div class="pro_button_positon">
            <el-button type="info"  plain @click="changestatus">{{ flagshow?overText: beginText}}</el-button>
        </div>
        <div class="pro_main" :style="flagshow?disshowimg:showimg">
            
            <div class="framePosition1">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div class="framePosition2">
                <el-upload
                class="upload-demo"
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'protectmain',
    data(){
        return{
            flagshow:false,
            showimg:'display:none',
            disshowimg:'display:block',
            beginText:"点击开始",
            overText:'点击返回'
        }
    },
    methods:{
        changestatus(){
            this.flagshow = !this.flagshow
        }
    }
}
</script>

<style>
.main{
    position: relative;
    padding-top:30px ;
}
.pro_button_positon{
    position:absolute;
    top: 350px;
    left: 1200px;
}

/* 上传框样式 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  /* frame position */
.framePosition1{
    height: 178px;
    width: 178px;
    margin: 0px 0px 0px 300px;
}
.framePosition2{
    height: 50px;
    width: 300px;
    margin: 50px 0px 0px 242px;
}
</style>